<template>
<div class="assess-report">
    <basic-index></basic-index>
    <template v-if="[4].includes(type)">
        <cluster-table></cluster-table>
        <pie-chart></pie-chart>
    </template>
    <template v-if="[5].includes(type)">
        <visual-display></visual-display>
    </template>
    <template v-if="[2].includes(type)">
        <graphical-display></graphical-display>
        <threshold-division></threshold-division>
        <div class="threshold-confusion">
            <confusion-matrix></confusion-matrix>
            <evaluation-index></evaluation-index>
        </div>
        <probability-count></probability-count>
    </template>
</div>
</template>

<script>
import BasicIndex from './BasicIndex'
import EvaluationIndex from './EvaluationIndex'
import GraphicalDisplay from './GraphicalDisplay'
import ProbabilityCount from './ProbabilityCount'
import ThresholdDivision from './ThresholdDivision'
import VisualDisplay from './VisualDisplay'
import ConfusionMatrix from './ConfusionMatrix'
import PieChart from './PieChart'
import ClusterTable from './ClusterTable'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'AssessReport', // 评估报告
    components: {
        BasicIndex,
        EvaluationIndex,
        GraphicalDisplay,
        ProbabilityCount,
        ThresholdDivision,
        VisualDisplay,
        ConfusionMatrix,
        PieChart,
        ClusterTable
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            type: null
        }
    },
    created () {
        this.type = this.modelDetail.summary.evaSummary.algorithmType
    }
}
</script>

<style lang="less">
.assess-report {
    .threshold-confusion {
        display: flex;
        margin-top: -70px;
    }
}
</style>
